<template>

    <div class="app-container">

        <h2 style="text-align: center;">发布新课程</h2>
        <!-- :active=1表示选中第一个 -->
        <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
            <el-step title="填写课程基本信息" />
            <el-step title="创建课程大纲" />
            <el-step title="提交审核" />
        </el-steps>

        <el-form label-width="120px">
            <el-form-item label="课程标题">
                <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写" />
            </el-form-item>

            <!-- 所属分类 TODO -->
            <el-form-item label="课程分类">
                <!-- 一级分类 -->
                <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="subjectLevelOneChanged">
                    <!-- v-for进行循环遍历  :label里面表示显示的内容  :value="teacher.id"是提交的内容   -->
                    <el-option v-for="subject in subjectOneList" :key="subject.id" :label="subject.title"
                        :value="subject.id" />
                </el-select>
                <!-- 二级分类 -->
                <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
                    <!-- v-for进行循环遍历  :label里面表示显示的内容  :value="teacher.id"是提交的内容   -->
                    <el-option v-for="subject in subjectTwoList" :key="subject.id" :label="subject.title"
                        :value="subject.id" />
                </el-select>
            </el-form-item>

            <!-- 课程讲师 -->
            <el-form-item label="课程讲师">
                <el-select v-model="courseInfo.teacherId" placeholder="课程讲师">
                    <!-- v-for进行循环遍历  :label里面表示显示的内容  :value="teacher.id"是提交的内容   -->
                    <el-option v-for="teacher in teacherList" :key="teacher.id" :label="teacher.name"
                        :value="teacher.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="总课时">
                <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right"
                    placeholder="请填写课程的总课时数" />
            </el-form-item>

            <!-- 课程简介 TODO -->
            <!-- 课程简介-->
            <el-form-item label="课程简介">
                <tinymce :height="300" v-model="courseInfo.description" />
            </el-form-item>

            <!-- 课程封面 TODO -->
            <!-- 课程封面-->
            <el-form-item label="课程封面">
                <!-- 
                    :show-file-list表示是否显示文件列表
                 -->
                <el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                    :action="BASE_API+'/eduoss/fileoss'" class="avatar-uploader">
                    <img :src="courseInfo.cover">
                </el-upload>

            </el-form-item>

            <el-form-item label="课程价格">
                <el-input-number :min="0" v-model="courseInfo.price" controls-position="right"
                    placeholder="免费课程请设置为0元" /> 元
            </el-form-item>

            <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>
<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
import Tinymce from '@/components/Tinymce'   //引入组件
export default {
    // 声明组件
    components: { Tinymce },
    data() {
        return {
            courseId: '',
            teacherList: [],  //用于封装所有的讲师数据
            subjectOneList: [],//一级分类的数组
            subjectTwoList: [],//二级分类的数组
            saveBtnDisabled: false,// 保存按钮是否禁用
            BASE_API: process.env.BASE_API, // 接口API地址
            courseInfo: {
                title: '',
                subjectId: '',//二级分类id
                subjectParentId: '',//一级分类id
                teacherId: '',
                lessonNum: 0,
                description: '',
                cover: '/static/课程图片.png',
                price: 0
            }
        }
    },

    // 路由发生变化，就会执行这个方法
    watch: {
        // 监听
        $route(to, from) {   //路由变化的方式，路由发生变化，这个方法就会执行
            console.log('watch $route')
            this.init()
        }
    },

    created() {
        // 获取到路由里面的id值
        // 获取到路由里面的id值
        if (this.$route.params && this.$route.params.id) {
            this.courseId = this.$route.params.id;
            // 调用根据id查询课程的方法
            this.getInfo();
        } else {
            // 初始化所有讲师
            this.getListTeacher();
            // 初始化一级分类
            this.getOneSubject();
        }
    },

    methods: {
        init() {
            if (this.$route.params && this.$route.params.id) {
                this.courseId = this.$route.params.id;
                // 调用根据id查询课程的方法
                this.getInfo();
            } else {
                this.courseInfo = {};
            }
        },

        // 根据课程id查询课程信息
        getInfo() {
            course.getCourseInfoId(this.courseId).then(response => {
                this.courseInfo = response.data.courseInfoVo;
                // 查询所有的分类，分类包含一级分类和二级分类
                subject.getSubjectList()
                    .then(response => {
                        // 获取所有的一级分类
                        this.subjectOneList = response.data.list;
                        // 把所有的一级分类数组进行遍历
                        for (var i = 0; i < this.subjectOneList.length; i++) {
                            // 获取每一个一级分类
                            var oneSubject = this.subjectOneList[i];
                            // 比较当前courseInfo里面的一级分类id和所有的一级分类id
                            if (this.courseInfo.subjectParentId == oneSubject.id) {
                                // 获取一级分类的所有的二级分类
                                this.subjectTwoList = oneSubject.children;
                            }
                        }
                    })
                // 初始化所有讲师
                this.getListTeacher();
            })
        },
        // 查询所有的一级分类
        getOneSubject() {
            subject.getSubjectList().then(response => {
                this.subjectOneList = response.data.list;
            })
        },
        subjectLevelOneChanged(value) {
            this.courseInfo.subjectParentId = value;
            // 一级分类点击之后，二级分类做出改变
            // value就是一级分类的id值
            for (var i = 0; i < this.subjectOneList.length; i++) {
                // 每个一级分类
                var oneSubject = this.subjectOneList[i];
                // 判断，所有的一级分类id和点击的一级分类id是不是一样的
                if (oneSubject.id === value) {
                    // 从一级分类里面获取所有的二级分类
                    this.subjectTwoList = oneSubject.children;
                    // 将二级分类里面的数据清空
                    this.courseInfo.subjectId = '';
                }
            }
        },
        // 添加课程
        addCourse() {
            // this.data.saveBtnDisabled = true;
            course.addCourseInfo(this.courseInfo)
                .then(response => {
                    // 提示信息
                    this.$message({
                        type: 'success',
                        message: '添加课程信息成功！'
                    })
                    // 跳转到第二步
                    // 后面是需要跟上课程的id值
                    this.$router.push({ path: '/course/chapter/' + response.data.courseId })
                })
        },
        // 更新课程
        updateCourse() {
            course.updateCourseInfo(this.courseInfo)
                .then(response => {
                    // 提示信息
                    this.$message({
                        type: 'success',
                        message: '修改课程信息成功！'
                    })
                    // 跳转到第二步
                    // 后面是需要跟上课程的id值
                    this.$router.push({ path: '/course/chapter/' + this.courseId })
                })
        },
        // 点击保存或下一步执行的方法
        saveOrUpdate() {
            // 判断是添加还是修改
            if (!this.courseInfo.id) {
                // 添加操作
                this.addCourse();
            } else {
                // 修改操作
                this.updateCourse();
            }
        },
        // 查询所有的讲师
        getListTeacher() {
            course.getListTeacher()
                .then(response => {
                    this.teacherList = response.data.items;
                })
        },
        // 文件上传之前执行的方法
        beforeAvatarUpload() {
            // const isJPG = file.type === 'image/jpeg'
            // const isLt2M = file.size / 1024 / 1024 < 2

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!')
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!')
            // }
            // return isJPG && isLt2M
        },
        // 文件上传成功执行的方法
        handleAvatarSuccess(res, file) {
            this.courseInfo.cover = res.data.url;
        }
    }
}
</script>

<style scoped>
.tinymce-container {
    line-height: 29px;
}
</style>